<template>
  <view class="main">
    <view class="title">{{ detailData.title }}</view>
    <view class="introduction">{{ detailData.introduction }}</view>
    <view class="createTime">{{ detailData.createTime }}</view>
    <view class="image">
      <image :src="detailData.image"></image>
    </view>
    <!-- <rich-text :nodes="detailData.detail"></rich-text> -->
    <view v-html="detailData.detail"></view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getArticleDetail } from '../../api/index';

interface DetailData {
  detail?: string;
  [key: string]: any;
}

const detailData = ref<DetailData>({});

// 获取详情
const getDetail = async (id: string) => {
  uni.showLoading({
    title: '加载中...',
    mask: true,
  });

  try {
    const { data } = await getArticleDetail(id);
    
    if (data.detail) {
      try {
        let processedDetail = decodeURIComponent(data.detail)
          .replace(/<iframe[^>]*src="([^"]*)"[^>]*><\/iframe>/g, (match, src) => {
            return `<video src="${src}" controls></video>`;
          })
          .replace(/<img[^>]*src="data:image\/[^;]+;base64,[^"]*"[^>]*>/g, match => {
            return match.replace('>', ' style="height: auto; width: 100%; object-fit: cover;" >');
          })

        detailData.value = {
          ...data,
          detail: processedDetail,
        };
      } catch (decodeError) {
    
        detailData.value = {
          ...data,
          detail: data.detail,
        };
      }
    } else {
      detailData.value = data;
    }
  } catch (error) {

    uni.showToast({
      title: '获取详情失败',
      icon: 'none',
    });
  } finally {
    console.log('detailData', detailData.value);
    uni.hideLoading();
  }
};

// 页面加载时调用
onLoad((option: { id: string }) => {
  getDetail(option.id);
});
</script>


<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  padding: 24rpx;
  box-sizing: border-box;
  background-color: #FAFBFC;
  overflow-x: hidden;
  .title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
  }
  .introduction {
    margin-bottom: 16rpx;
  }
  .createTime {
    color: #999;
    margin-bottom: 16rpx;
  }

  uni-view {
    white-space: pre-wrap;
  }
  p {
    white-space: pre-wrap;
  }
}

::v-deep(.italic-img){
  height: 200px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  width: auto;
}

.image {
  width: 100%;
  height: 280rpx;
  margin-bottom: 16rpx;
  border-radius: 12rpx;
  overflow: hidden;
  image {
    width: 100%;
    height: 100%;
  }
}
</style>
